<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl" style="color: #4e598c">
        新旧版本功能点击次数汇总（近30日平均）
      </div>
    </div>
    <div class="md:flex">
      <AppFunctionPicker
        ref="AppFunctionPickerRef"
        class="w-full enter-x"
        @success="handleSuccess"
      >
      </AppFunctionPicker>
    </div>
    <div class="md:flex">
      <div :id="aveFunctionClicksComparisonBar" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import * as echarts from 'echarts';
import { FunctionCompareDto } from '/@/api/operation-center/app-operation/function-analysis/model/functionAnalysisModel';
import { getAveFunctionClicksComp } from '/@/api/operation-center/app-operation/function-analysis/functionAnalysis';
import AppFunctionPicker from '/@/views/operation-center/components/AppFunctionPicker.vue';

const aveFunctionClicksComparisonBar = 'ave-function-clicks-comparison-bar-chart';

var option: any;

const AppFunctionPickerRef = ref();

let functionVersionList: string[] = [];
let functionClicksList: number[] = [];
let functionClicksCompList: any[] = [];

function converToFuncBarChartData(res: FunctionCompareDto[]) {

  res.forEach((item) => {
    functionVersionList.push(item.description);
    functionClicksList.push(item.num);
  })

  functionClicksCompList.push({
    name: '功能点击数（近30天平均）', 
    type: 'bar', 
    data: functionClicksList, 
  });
}

function initBarChart(barChartName: string, yAxisData: string[], seriesData: number[], option: any) {
  let barDom = document.getElementById(barChartName);
  let myChart = echarts.init(barDom);

  option = {
    tooltip: {
      trigger: 'axis', 
      axisPointer: {
        type: 'shadow', 
      }, 
    }, 
    grid: {
      left: '5%', 
      bottom: '0%', 
      top: '0%', 
      containLabel: true, 
    }, 
    xAxis: {
      type: 'value', 
      show: true, 
      axisLabel: {
        formatter: '{value}', 
        show: true, 
      }, 
      axisLine: {
        show: true, 
      }, 
    }, 
    yAxis: [
      {
        type: 'category', 
        data: yAxisData, 
      }
    ], 
    series: [
      {
        data: seriesData, 
        type: 'bar',  
      }, 
    ]
  };

  option && myChart.setOption(option);
}

const handleSuccess = (params) => {
  getAveFunctionClicksComp(params).then((res) => {
    converToFuncBarChartData(res);

    setTimeout(()=>{
      initBarChart(aveFunctionClicksComparisonBar, functionVersionList, functionClicksList, option)
    }, 300);
  });
}

</script>
